<template>
  <div>
    <van-cell-group>
      <img :src="showlist.pic" alt="" />
      <span>{{ showlist.minPrice }}</span>
      价格<span>{{ showlist.originalPrice }}</span
      ><br />
      <span>{{ showlist.name }}</span>
      <span>{{ showlist.characteristic }}</span>

      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
        商品详情
      </van-divider>
      <div v-html="content" class="con"></div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" />
        <van-goods-action-icon icon="shop-o" text="店铺" />
        <van-goods-action-button
          color="#be99ff"
          type="warning"
          text="加入购物车"
          @click="jiaru"
        />
        <van-goods-action-button
          color="#7232dd"
          type="danger"
          text="立即购买"
        />
      </van-goods-action>
    </van-cell-group>
  </div>
</template>

<script>
import { detail } from "@/api/login";
export default {
  name: "WorkspaceJsonXiangqing",

  data() {
    return {
      showlist: [],
      content: "",
    };
  },

  mounted() {
    this.showinfo();
  },

  methods: {
    jiaru() {
      var obj = {
        name: this.showlist.name,
        pic: this.showlist.pic,
        price: this.showlist.minPrice,
        id: this.showlist.id,
        check: true,
      };
      this.$store.commit("Save", obj);
    },
    async showinfo() {
      let res = await detail({ params: { id: this.$route.query.id } });
      //   console.log(res);
      this.showlist = res.data.basicInfo;
      this.content = res.data.content;
    },
  },
};
</script>

<style lang="less" scoped>
.con /deep/ img {
  width: 100%;
  height: 200px;
}
.font {
  img {
    width: 100%;
    height: 200px;
  }
}
.van-cell-group {
  img {
    width: 100%;
    height: 200px;
  }
}
</style>